<div id="app">
    <admin-page-header back>
        <bi-button icon="fa-plus" @click="edit()" type="primary">添加项目</bi-button>
    </admin-page-header>

    <div class="container">
         
            <div class="col-12">
                <bi-card title="规格详情">
                    <bi-table :data="list" dragsort tree tree-key="item_id" @dragsort="dragsort" item-key="item_id" :loading="loading"  min-height="300" >
                        <bi-table-column label="类型" name="type" width="100" >
                        </bi-table-column>
                        <bi-table-column label="规格名称" name="title"  tree-fold  ></bi-table-column>
                        <bi-table-column label="默认值" name="defaultValue" v-slot="{row}"  width="200" >
                            <div>{{row.type!='node'?row.defaultValue:''}}</div>
                        </bi-table-column>
                        <bi-table-column label="操作" width="130" v-slot="{row}">
                            <bi-button type="primary" @click="edit(row)"  >编辑</bi-button>
                            <bi-button type="warning" @click="del(row)" >删除</bi-button>
                         </bi-table-column>
                       </bi-table>
                </bi-card>
            </div>
        </div>
    </div>
</div>

<script>
import editDialog from 'spec/edit-item-dialog.vue';

let app = admin.createApp({
    data() {
        return {
            loading:false,
            list:[],
            page:1,
            total:0,
            count:0,
            spec:this.$pageData.spec,
            search:{
                keyword:''
            }
        }
    },
    methods: {
        edit(item) {

            let title = item?'编辑项目':'添加项目';

            this.$dialog({
                title,
                type:'vue',
                content:admin.createApp(editDialog,{item,spec:this.spec}),
                callback:()=>{
                    this.reFresh();
                }
            });
        },
        del(item){
            this.$confirm('确定要删除规格吗?',()=>{
                this.$ajax({
                    url:this.$url({action:'delItem'}),
                    data:{
                        item_id:item.item_id,
                        spec_id:item.spec_id
                    },
                    success:(res)=>{
                        this.reFresh();
                        this.$toast({text:'删除成功',type:'success'});
                    }
                })
            })
        },
        dragsort(list){
            this.$loading();
            this.$ajax({
                url:this.$url({action:'itemSort'}),
                data:{
                    spec_id:this.spec,
                    list
                },
                success:(res)=>{
                    this.$loading(false);
                    this.reFresh();
                }
            })
        },
        reFresh(){
            this.loading = true;
            this.$ajax({
                url:this.$url({action:'itemTree'}),
                data:{
                    spec:this.spec
                },
                success:(res)=>{
                    this.list = res.tree;
                    this.loading = false;
                }
            });
        }
    },
    mounted() {
        this.reFresh();
    }
}).mount('#app');
</script>